<template>
  <div class="data-grid">
    <el-row style="margin-top: 10px">
      <el-table :data="data"
                :column='columns'
                :pagination='pagination'
                :height="tableHeight"
                style="width: 100%"
                @selection-change="handleSelectionChange">

        <el-table-column type="selection" width="50">
        </el-table-column>

        <el-table-column v-for="column in columns"
                         :key="column.id"
                         :prop="column.prop"
                         :label="column.label"
                         :width="column.width"
                         :align="column.align">
          <template slot-scope='scope'>
            <el-tag v-if="column.mappingType == 'tag'">
              <!-- {{doMapping(column,scope)}} -->
              {{ column.formatter ? doFormat(column,scope) : doMapping(column, scope) }}
            </el-tag>
            <div v-else>
              <!-- {{doMapping(csope,column)}} -->
              {{ column.formatter ? doFormat(column,scope) : doMapping(column, scope) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" :width="operationFieldWidth">
<!--          <template slot-scope="scope">-->
<!--            <el-button type="primary" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>-->
<!--            <el-button type="primary" size="small" @click="handleBind(scope.row.id)">绑定</el-button>-->
<!--            <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>-->
<!--          </template>-->
          <template slot-scope="scope">
            <slot v-bind:row="scope.row"></slot>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-pagination background
                     @size-change="handleSizeChange"
                     @current-change="handlePageChange"
                     :current-page="pagination.page"
                     :page-sizes="[5, 10, 20, 50]"
                     :page-size="pagination.pageSize"
                     layout="total, sizes, prev, pager, next"
                     :total="pagination.total">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "DataGrid",
  props: {
    columns: {
      type: Array,
      "default": () => [],
    },
    data: {
      type: Array,
      "default": () => [],
    },
    pagination: {
      type: Object,
      "default": () => {
      }
    },
    operationFieldWidth: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tableHeight: window.innerHeight - 179,
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val);
    },

    handlePageChange(val) {
      console.log(val);
    },

    handleSizeChange(val) {
      console.log(val);
    },

    handleEdit(scrope) {
      console.log(scrope);
    },

    doMapping(column, scope) {
      let ReturnValue = scope.row[column.prop];
      if (column.mapping) {
        let index = scope.row[column.prop];
        return column.mapping[index].value;
      }else{
        return ReturnValue
      }
    },

    /* 负责接收渲染带formatter字段的数据 */
    doFormat(column,scope){
      let formatFunction = column.formatter;
      let formatText = scope.row[column.prop];
      return formatFunction(formatText)
    },
  }
}
</script>

<style scoped>
.data-grid {
  width: 100%;
}

/*.el-table .cell {*/
/*	text-align: center !important;*/
/*}*/

.el-pagination {
  text-align: center;
  /*padding: 5px;*/
}
</style>
